<script setup>
import {Delete, DocumentAdd, Search} from "@element-plus/icons-vue";
import {ref} from "vue";
import requestUtil from "@/utils/request";
import Dialog from '@/views/sys/role/components/dialog.vue'
import {ElMessage} from "element-plus";
import MenuDialog from '@/views/sys/role/components/menuDialog.vue'
import HostPermissionsDialog from "@/views/sys/role/components/hostPermissionsDialog.vue";
import AlertGroupDialog from "@/views/sys/role/components/alertGroupDialog.vue";

const queryForm = ref({
  query: '',
  pageNum: 1,
  pageSize: 10,
})

const total = ref(0)

const tableData = ref([])

const id = ref(-1)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const menuDialogTitle = ref('')

const delBtnStatus = ref(true)
const multipleSelection = ref([])

const hostPermissionsDialogTitle = ref('')
const hostPermissionsDialogVisible = ref(false)

const initRoleList = async () => {
  const res = await requestUtil.post('role/search', queryForm.value)
  console.log(res.data)
  tableData.value = res.data.msg
  total.value = res.data.total
}
initRoleList()

const handleSizeChange = (pageSize) => {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = pageSize
  initRoleList()
}

const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  initRoleList()
}

const handleDialogValue = (roleId) => {
  if (roleId) {
    id.value = roleId;
    dialogTitle.value = '角色修改'
  } else {
    id.value = -1;
    dialogTitle.value = '角色添加'
  }
  dialogVisible.value = true
}

const handleSelectionChange = (selection) => {
  // 过滤掉用户名为 'admin' 的用户
  multipleSelection.value = selection.filter(row => row.code !== 'admin');
  delBtnStatus.value = multipleSelection.value.length === 0;
}

const handleDelete = async (id) => {
  let idList = []
  if (id) {
    idList.push(id)
  } else {
    multipleSelection.value.forEach(row => {
      idList.push(row.id)
    })
  }
  let res = await requestUtil.del('role/del/role', idList)
  let data = res.data
  if (data.code === 200) {
    ElMessage.success("删除成功")
    await initRoleList()
  } else {
    ElMessage.error(data.msg)
  }
}

const menuDialogVisible = ref(false)

const handleMenuDialogValue = (roleId) => {
  if (roleId) {
    id.value = roleId
  }
  menuDialogTitle.value = "功能权限"
  menuDialogVisible.value = true
}

const handleHostDialogValue = (roleId) => {
  if (roleId) {
    id.value = roleId
    hostPermissionsDialogTitle.value = '主机权限'
  }
  hostPermissionsDialogVisible.value = true
}

const alertGroupDialogTitle = ref('')
const alertGroupDialogVisible = ref(false)
const handleAlertGroupDialogValue = (roleId) => {
  if (roleId) {
    id.value = roleId
    alertGroupDialogTitle.value = '告警分组权限'
  }
  alertGroupDialogVisible.value = true
}

</script>

<template>
  <div class="app-container">
    <el-card class="box-card">
      <template v-slot:header>
        <div class="space-between">
          <el-text class="width-class">角色名:</el-text>
          <el-input class="width-class" style="width: 300px" placeholder="请输入角色名..." v-model="queryForm.query"
                    clearable></el-input>
          <el-button type="primary" :icon="Search" @click="initRoleList">搜索</el-button>
          <el-button type="warning" :icon="DocumentAdd" @click="handleDialogValue()">新增
          </el-button>
          <el-popconfirm title="你确定要批量删除这些记录吗？" @confirm="handleDelete(null)">
            <template #reference>
              <el-button type="danger" :disabled="delBtnStatus" :icon="Delete">批量删除</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>

      <el-table :data="tableData"
                stripe
                height="600px"
                style="width: 100%"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="角色名" min-width="10" align="center"/>
        <el-table-column prop="code" label="权限字符" min-width="10" align="center"/>
        <el-table-column prop="create_time" label="创建时间" min-width="20" align="center"/>
        <el-table-column prop="update_time" label="修改时间" min-width="20" align="center"/>
        <el-table-column prop="remark" label="备注" min-width="20" align="center"/>
        <el-table-column prop="action" label="操作" min-width="20" fixed="right" align="center">
          <template v-slot="scope">
            <el-button style="margin-bottom: 10px" v-if="scope.row.code !== 'admin'" type="primary"
                       @click="handleDialogValue(scope.row.id)">编辑
            </el-button>
            <el-button style="margin-bottom: 10px" type="primary" @click="handleMenuDialogValue(scope.row.id)">功能权限
            </el-button>

            <el-button style="margin-bottom: 10px" type="primary" @click="handleHostDialogValue(scope.row.id)">主机权限
            </el-button>
            <el-button style="margin-bottom: 10px" type="primary" @click="handleAlertGroupDialogValue(scope.row.id)">
              告警分组权限
            </el-button>
            <el-popconfirm v-if="scope.row.code !=='admin'" title="你确定要删除这条记录吗？"
                           @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button style="margin-bottom: 10px" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <Dialog v-model="dialogVisible" :dialogVisible="dialogVisible" :id="id" :dialogTitle="dialogTitle"
            @initRoleList="initRoleList"></Dialog>
    <MenuDialog v-model="menuDialogVisible" :dialogVisible="menuDialogVisible" :dialogTitle="menuDialogTitle" :id="id"
                @initRoleList="initRoleList"></MenuDialog>

    <HostPermissionsDialog v-model="hostPermissionsDialogVisible"
                           :dialogVisible="hostPermissionsDialogVisible" :id="id"
                           :dialogTitle="hostPermissionsDialogTitle"></HostPermissionsDialog>

    <AlertGroupDialog v-model="alertGroupDialogVisible"
                      :dialogVisible="alertGroupDialogVisible" :id="id"
                      :dialogTitle="alertGroupDialogTitle" menu-dialog-visible></AlertGroupDialog>
  </div>
  <el-pagination
      :hide-on-single-page="true"
      v-model:currentPage="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
</template>
<style scoped lang="scss">
.space-between {
  display: flex;
  align-items: center;
  height: 24px;

  .width-class {
    margin-right: 10px;
  }
}

.el-pagination {
  float: right;
  padding: 20px;
  box-sizing: border-box;
}

:deep(th.el-table__cell) {
  word-break: break-word;
  color: var(--text-color);
  height: 40px;
  font-size: 13px;
}

.el-tag--small {
  margin-left: 5px;
}
</style>
